<template>
  <view class="shop-detail">
    <view class="form">
      <van-cell
        class="value-strong"
        :title="shopName"
        value="切换店铺"
        clickable
        @click="openPopup('shop')"
      ></van-cell>
      <van-cell
        class="time-select"
        title="选择时间"
        :value="selectedtTime"
        is-link
        @click="openPopup('time')"
      ></van-cell>
    </view>

    <view class="overall-store-data">
      <view class="d-item">
        <view class="count">680</view>
        <view class="name">订单数</view>
      </view>
      <view class="d-item">
        <view class="count">30000</view>
        <view class="name">营业额</view>
      </view>
      <view class="d-item">
        <view class="count">2000</view>
        <view class="name">预存金额</view>
      </view>
      <view class="d-item">
        <view class="count">5</view>
        <view class="name">新增会员</view>
      </view>
    </view>

    <view class="tabs">
      <view class="tabs-title">
        <view @tap="handleChangeTab(0)" class="tab" :class="active === 0 ? 'active' : '' ">订单数据</view>
        <view @tap="handleChangeTab(1)" class="tab" :class="active === 1 ? 'active' : '' ">充值数据</view>
        <view @tap="handleChangeTab(2)" class="tab" :class="active === 2 ? 'active' : '' ">库存数据</view>
      </view>
      <view class="tabs-content" v-if="active === 0">
        <view class="stat">
          <stat-item label="订单收入" value="265,429"></stat-item>
          <stat-item label="奖励金额" value="2,526"></stat-item>
          <stat-item label="订单成本" value="192,020"></stat-item>
          <stat-item label="店铺服务费" value="12,526"></stat-item>
        </view>
        <bar-chart v-if="!popupShow" title="订单数量：25" unit="单" order-record :data="productData"></bar-chart>
        <pie-chart class="analyse" title="订单收入" v-if="!popupShow" :data="orderIncomeChartData"></pie-chart>
        <pie-chart class="analyse" title="成本分析" v-if="!popupShow" :data="costChartData"></pie-chart>
      </view>
      <view class="tabs-content" v-if="active === 1">
        <pie-chart class="analyse" title="当前预存总额：3242342元" v-if="!popupShow" :data="costChartData"></pie-chart>
        <pie-chart class="analyse" title="充值金额：3242342元" v-if="!popupShow" :data="costChartData"></pie-chart>
      </view>
      <view class="tabs-content" v-if="active === 2">
        <pie-chart class="analyse" title="当前库存：9989件" v-if="!popupShow" :data="costChartData"></pie-chart>
      </view>
    </view>

    <a-logo type="text"></a-logo>

    <van-popup
      :show="popupShow"
      :position="popupPosition||'bottom'"
      z-index="9999"
      close-on-click-overlay
      @close="popupShow=false"
    >
      <van-picker
        v-if="curPopup == 'shop'"
        ref="shopPicker"
        show-toolbar
        :visible-item-count="3"
        :columns="shopPickerTypes"
        @confirm="handleConfirmChangeShop"
        @cancel="popupShow=false"
      />
      <template v-if="curPopup=='time'">
        <a-datetime-picker @confirm="handleDatetimeConfirm" @close="popupShow=false"></a-datetime-picker>
      </template>
    </van-popup>
  </view>
</template>

<script>
import StatItem from '../@fragment/stat-item'
import pieChart from '../../components/pie-chart'
import barChart from '../../components/bar-chart'
import { model } from '@/model';

const { Member, Shop } = model.collection;

export default {
  components: {
    StatItem,
    pieChart,
    barChart
  },
  data () {
    const curDay = this.getDayjsObj().format('YYYY-MM-DD')
    return {
      curDay,
      shopId: '',
      shopList: [],
      shopName: '',
      form: {
        time: [curDay, curDay]
      },
      productData: [{
        name: '零售订单',
        value: 580
      },
      {
        name: '会员订单',
        value: 410
      },
      {
        name: '思雪订单',
        value: 410
      },
      {
        name: '预售订单',
        value: 123
      }
      ],
      orderIncomeChartData: [{
        name: '零售订单',
        value: 2561
      },
      {
        name: '会员订单',
        value: 945
      },
      ],
      costChartData: [{
        name: '订单成本',
        value: 2561
      },
      {
        name: '活动成本',
        value: 945
      },
      {
        name: '内裤卡成本',
        value: 6800
      },
      {
        name: '奖励成本',
        value: 4582
      }
      ],
      curPopup: '',
      popupPosition: '',
      popupShow: false,
      startDay: new Date('2020-01-01').valueOf(),
      currentDate: new Date().getTime(),
      formatter: (type, val) => {
        if (type === 'year') {
          return val + '年';
        }
        if (type === 'month') {
          return val + '月';
        }
        if (type === 'day') {
          return val + '日';
        }
        return val;
      },
      active: 0
    }
  },
  computed: {
    shopPickerTypes () {
      return this.shopList.map(t => t.name)
    },
    selectedtTime () {
      let res = ''
      let curDay = this.curDay,
        curDayObj = this.getDayjsObj(curDay),
        curWeekFirstDay = curDayObj.day(0).format('YYYY-MM-DD'),
        curMonthFirstDay = curDayObj.date(1).format('YYYY-MM-DD'),
        startTime = this.form.time[0] || '',
        endTime = this.form.time[1] || ''
      if (startTime && endTime) {
        if (endTime == curDay) {
          if (startTime == curDay) {
            res = '今日'
          } else if (startTime == curWeekFirstDay) {
            res = '本周'
          } else if (startTime == curMonthFirstDay) {
            res = '本月'
          }
        } else {
          res = startTime + ' -- ' + endTime
        }
      }
      return res
    }
  },
  onLoad (params) {
    this.id = params.id
    this.getShopInfo();
  },
  methods: {
    getShopInfo () {
      Shop.sendApi('shopInfo', {
        params: {},
        data: {
          query: {
            id: this.id
          }
        }
      }).then(res => {
        const {
          status,
          data
        } = res;
        if (status) {
          this.shopName = data.name
        }
      });
    },
    openPopup (type) {
      this.curPopup = type
      this.popupShow = true
      if (type === 'shop') {
        Member.sendApi('shopList', {
          params: {},
          data: {}
        }).then(res => {
          const {
            status,
            data
          } = res;
          if (status) {
            this.shopList = data
          }
        });
      }
    },
    handleConfirmChangeShop (e) {
      this.popupShow = false
      this.shopName = e.detail.value
    },
    handleDatetimeConfirm (e) {
      let value = e.detail.__args__[0]
      if (value[0] && value[1]) {
        this.form.time = [...value]
      }
      this.popupShow = false
    },
    handleChangeTab (e) {
      this.active = e
    }
  }
}
</script>

<style lang="less" scoped>
.shop-detail {
  background-color: #f7f7f7;
  padding: 0;

  .form {
    background: #fff;

    /deep/ .van-cell {
      &__title {
        flex: 3;
        font-size: 32rpx;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #000;
      }
    }

    .value-strong {
      /deep/ .van-cell__value {
        color: @color-theme;
      }
    }

    .search-btn {
      padding: 40rpx 30rpx;

      /deep/ .axq-btn {
        display: block;
        border-radius: 6rpx;
        height: 90rpx;
        line-height: 90rpx;
      }
    }

    .time-select {
      /deep/ .van-cell__title {
        flex: unset;
      }
    }
  }

  .overall-store-data {
    margin: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 15rpx;

    .d-item {
      width: 160rpx;
      height: 160rpx;
      text-align: center;

      .count {
        margin-top: 30rpx;
        font-size: 34rpx;
        font-weight: bold;
      }

      .name {
        margin-top: 15rpx;
        font-size: 29rpx;
        color: #979797;
      }
    }
  }

  .tabs {
    &-title {
      margin: 30rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      border-radius: 15rpx;
      background-color: #fff;

      .tab {
        width: 115rpx;
        height: 100rpx;
        line-height: 100rpx;
        overflow: visible;
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
      }

      .active {
        color: #dc117d;
        border-bottom: 8rpx solid#dc117d;
      }
    }

    &-content {
      .stat {
        .flexLayout();
        flex-wrap: wrap;
        margin-top: 30rpx;
      }
    }
  }

  .analyse {
    margin: 0 @box-gap;
    background: #fff;
    border-radius: 15rpx;
  }
}
</style>